<template>
  <div
    class="contentItem"
    :class="{ contentItem_normal: item.textEllipsis === false }"
  >
    <div class="label" v-html="item.label"></div>
    <div class="content" v-html="contentHtml" :title="title"></div>
  </div>
</template>
<script>
export default {
  props: {
    data: {},
    item: {
      type: Object,
      default: () => {
        return {};
      },
    },
    content: {
      default: "",
    },
  },
  computed: {
    contentHtml() {
      if (this.item.format) {
        return this.item.format(this.content, this.data);
      } else {
        return this.content || this.item.content;
      }
    },
    title() {
      if (this.item.titleFormat) {
        return this.item.titleFormat(this.content, this.data);
      } else {
        return this.content;
      }
    },
  },
};
</script>
<style scoped>
.contentItem {
  display: flex;
  line-height: 18px;
  height: 18px;
  font-size: 14px;
  margin-bottom: 20px;
}
.label {
  color: #999;
  margin-right: 10px;
}
.label ::after {
  content: " :";
  display: inline-block;
  margin-left: 4px;
  color: #21252e;
}
.contentItem .content {
  flex: 1;
  color: #505363;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contentItem_normal {
  height: auto;
}
.contentItem.contentItem_normal .content {
  white-space: normal;
  word-break: break-all;
}
</style>
